<template>
    <div class="list">
        <div>
            <h3>系统应用</h3>
            <ul ref="add_one">
                <li  v-for="(item,index) in arr1" :key="index">
                    <img :src="item.imgSrc" alt=""/>
                    <span>{{item.text}}</span>
                </li>
                <div>
                    <img @click="add_box" src="@/assets/add.png" alt="">
                </div>
            </ul>
        </div>
        <div>
            <h3>用户管理</h3>
            <ul>
                <li v-for="(item,index) in arr2" :key="index">
                    <img :src="item.imgSrc" alt=""/>
                    <span>{{item.text}}</span>
                </li>
                <div>
                    <img src="@/assets/add.png" alt="">
                </div>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name:'menhuDemo1',
    data() {
        return {
            arr1: [{ "imgSrc": require('../../assets/imgs/1.png'), "text": '物联网' }, { "imgSrc": require('../../assets/imgs/1.png'), text: '物联网' }],
            arr2: [{ "imgSrc": require('../../assets/imgs/2.png'), "text": '物联网' }, { "imgSrc": require('../../assets/imgs/2.png'), "text": '物联网' }]
        }
    },
    created() {
        this.add_box()
    },
    methods: {
        add_box() {
            // console.log(this.$refs.add_one.child);
        }
    }
}
</script>
<style>
*{
    margin: 0;
    padding: 0;
}
h3{
    font-size: .18rem;
    color: #fff;
    text-align: left;
}
h3+ul{
    /* margin-top: .54rem; */
    padding:0;
    /* border: .01rem solid #ccc; */
    margin-top: .54rem;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    color: #fff;
}
h3+ul li,h3+ul div{
    width:1.37rem;
    height:1.37rem;
    /* border: .01rem solid red; */
    margin: 0 .15rem .15rem 0;
}
h3+ul li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: .14rem;
    color: #000;
    text-align: center;
    background: #fff;
}
h3+ul li img{
    width:80%;
    height: .9rem;
    margin-bottom: .08rem;
}
h3+ul div{
    line-height: 1.37rem;
}
.list>div{
    margin-bottom: .68rem;
}
</style>